<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ include file="../common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>选择开户行</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link href="<s:url value="/css/a.css"/>" type="text/css"rel="stylesheet" />
<link href="<s:url value="/css/index.css"/>" type="text/css"rel="stylesheet" />
<%-- <link href="<s:url value="/css2/searchSelect.css"/>" type="text/css"rel="stylesheet" /> --%>
<script type="text/javascript" src="<s:url value="/js/jquery-1.9.1.js"/>"></script>	
<!-- <script type="text/javascript" src="/js/searchSelect.js"></script> -->
<script type="text/javascript" src="/js/tabcontrol/TabPanel.js"></script>
	

<style>　　
  	#test{width: 212px; padding: 2px; height: 22px; border: 1px solid #ddd; margin: 0 5px 0 0;display:none;}
	#test option{padding: 2px 5px;}
	#test option:first-child{display: none;} 
	 #pre{position:relative;} 
	#itest{
		background: url("../images/select.jpg") no-repeat scroll right center; 
		border: 1px solid #797979;
	    cursor: default;
	    height: 22px;
	    padding: 2px;
	    width: 166px;
    }
	#itest:focus{cursor: pointer;}
	#dtest{
		 background: lightgray; 
	    border: 1px solid #fff;
	    border-radius: 0 0 3px 3px;
	    display: none;
	    height: 300px;
	    left:42%;
	    overflow-y: auto;
	    position: absolute; 
	    top: 28px;
	    width: 200px;
	}
	.soption{display: block; padding: 2px 5px;}
	.soption:hover{background: yellow; border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; padding: 1px 5px;}
</style>

<script type="text/javascript">
$(document).ready(function(){//align='center'
	var input = '<div id="pre"  ><input id="itest" autocomplete="off" type="text" placeholder="---请选择---"><b> *</b>'; 
		var strDiv = '<div id="dtest" >';
		var strSpan = '';
		var L = $('#test option').size();
		for(var i = 1; i < L; i ++){
			strSpan += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
		}
		strDiv += strSpan + '</div></div>';
		$('#test').after(input + strDiv);
		
		//初始化结束
		$(document).on('focus','#itest',function(){//获得焦点，模仿select，显示模拟下拉框
			var st = $(this).val().trim();
			if(st == ''){
				$('#dtest').html(strSpan);
			}
			else{
				var strDiv2 = '';
				for(var i = 0; i < L; i ++){
					var html = $('#test option').eq(i).html();
					if(html.match(st)){
						strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
					}
				}
				$('#dtest').html(strDiv2);
			}
			$('#dtest').slideDown(250);
		});

		$(document).on('blur','#itest',function(){//失去焦点，隐藏模拟下拉框
			$('#dtest').slideUp(50);
		});

		$(document).on('keyup','#itest',function(){//输入信息，自动匹配，暂时不支持鼠标右键
			var st = $(this).val().trim();
			if(st == ''){
				$('#dtest').html(strSpan);
				return false;
			}
			var strDiv2 = '';
			for(var i = 0; i < L; i ++){
				var html = $('#test option').eq(i).html();
				if(html.match(st)){
					strDiv2 += '<span class="soption" data-val="'+ $('#test option').eq(i).attr('value') +'">' + $('#test option').eq(i).html() + '</span>';
				}else{
				   $("#test").val("0");
				}
			}
			$('#dtest').html(strDiv2);
			
		});

		$(document).on('mousedown','.soption',function(){//选择下拉选项
			var html = $(this).html();
			var val = $(this).data('val');
			$('#itest').val(html).data('val',val).blur();
			$('#test').val(val);
		});
		 
		$("#queryBtn").click(function (){
			var searchId=$("#test").val();
			if(searchId=="0"){
				alert("请选择开户行信息！");
				return ;
			}
			 
			$("#queryForm").attr("action","./queryBankList.ct");
			$("#queryForm").submit();
			$("#query_table").hide(); 
		});
		$("input[name=multi_sel]").click(function(){
			var a=this.value;
			var b=$("#"+a).val();
			 window.opener.document.getElementById("bbb").value=a;
			 window.opener.document.getElementById("aaa").value=b;
			 window.close();
		});
		$("#queryStrBtn").click(function (){
			var searchId=$("#test").val();
			if(searchId=="0"){
				alert("请选择开户行信息！");
				return ;
			}
			//alert($("#oneNames").val());
			if($("#queryStr").val()!=null || $("#queryStr").val()!=""){
				$("#test").val("");
			}
			$("#queryForm").attr("action","./queryBankList.ct?searchCondition.bankName="+$("#oneNames").val());
			$("#queryForm").submit();
			$("#query_table").hide();
		});
		$("#chanleBtn").click(function(){
			$("#test").val("0");
			$("#queryStr").val("");
			$("#queryForm").attr("action","./init.ct");
			$("#queryForm").submit();
		});
	})
</script>



</head>

<body>

	<div class="subpage">
		<s:form id="queryForm" action="/chooseBank/queryBankList.ct" method="post" theme="simple">
			<s:hidden id="oneNames" value="%{#request.oneName}"/>
			<s:if test="#request.searchRsList == null || #request.searchRsList.size==0">
			<table width="100%" cellpadding="0" cellspacing="0" border="0"class="query_table">
				<tr>
					<td colspan="4" align="center">
						<h2 class="headline-inquires">
							选择开户行<br />
							<span class="sub-title"></span>
						</h2>
					</td>
				</tr>
				<tr>
					<td colspan="4">&nbsp;</td>
				</tr>
                <tr>
			    	<td align="center" colspan="4" style="height: 40px;"><!-- 开户行 -->
			    		 
			    		<s:select    name="searchCondition.bankName" listKey="key" listValue="value"  
			    		 					 list="#request.bankList"  headerKey="0" headerValue="---请选择或输入---" 
			    		 					 cssStyle="display:none;" id="test"></s:select>
			    		<div style="height: 15px;"></div><input id="queryBtn" type="button" value="  查 询  "/>
			     	</td>	 
				</tr>
				
				 
			</table>
			</s:if>
			<s:if test="#request.searchRsList != null && #request.searchRsList.size>0">
			<table width="100%"cellpadding="0" cellspacing="0" border="0">

				<tr>
					<td colspan="4" align="center" style="padding-top: 20px;padding-bottom: 20px;">
						检索开户行详细信息（模糊查询）：<s:textfield name="searchCondition.bankName1" id="queryStr" />
						<input id="queryStrBtn" type="button" value=" 查询 "/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input id="chanleBtn" type="button" value=" 取消 "/>
					</td>
				</tr>
				
			</table>
			<table id="tableList" width="100%" class="table">
				<thead>
					<tr>
						<th>联行号</th>
						<th>选择行名</th>
					</tr>
				</thead>
				<tbody>
					<s:iterator value="#request.searchRsList" status="stat" id="bank">
							<tr class="<s:if test="#stat.index%2==0">tr_0</s:if>" >
								<td>  <s:property value="#bank.code"/></td>
								<%-- <td>  <s:property value="#bank.name"/></td> --%>
								<td>  <s:radio name="multi_sel" list="#{#bank.code:#bank.name}"  theme="simple" /></td>
								<input id="<s:property value="#bank.code"/>" value="<s:property value="#bank.name"/>" type="hidden" />
							</tr>
						</s:iterator>
				
					<tr>
						<td align="left" colspan="2">&nbsp;&nbsp;&nbsp;&nbsp; <page:pageCount
								max_pages="11" totalPage="${requestScope.totalPage}"
								currentPage="${requestScope.currentPage}"
								action="${rootPath}/chooseBank/queryBankList.ct?currentPage=" />
						</td>
					</tr>
				
				</tbody>
			</table>
			</s:if>
		</s:form>
	</div>
	<s:if test="#request.info_request !=null">
	<script language="javascript">
	    alert("${request.info_request}");
	    </script>
	</s:if>	
</body>
</html>
